<template>
  <div class="pad-20 bgc-default">
    <div class="bg-color-white pad-t-20 pad-b-20">
      <el-form ref="form" :model="role" :rules="rules" label-position="right" label-width="100px" style='width: 600px; margin-left:50px;'>
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="role.name" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="可用权限" prop="description">
          <set-role-permissions ref="rolePermissions" v-bind:permissionList="permissionList"></set-role-permissions>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="role.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属子系统" prop="status">
          <el-radio v-model="radio" label="1" @change="radioChange()" :disabled="radioFlag">企业子系统</el-radio>
          <el-radio v-model="radio" label="2" @change="radioChange()" :disabled="radioFlag">供应商子系统</el-radio>
          <el-radio v-model="radio" label="3" @change="radioChange()" :disabled="radioFlag">微客子系统</el-radio>
          <el-radio v-model="radio" label="4" @change="radioChange()" :disabled="radioFlag">仓库子系统</el-radio>
        </el-form-item>
      </el-form>
    </div>
    <div class="height-80"></div>
    <div class="footer-btns">
      <el-button @click="$router.push({ path: '/subAccount/role/index' })">取消</el-button>
      <el-button type="primary" @click="saveData">确定</el-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.bgc-default{
  min-height: calc(100vh - 60px);
}
.footer-btns{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  box-shadow: 0 -2px 2px #eee;
  .el-button{
    padding: 10px 30px;
  }
}
</style>

<script>
  import SetRolePermissions from '../components/SetRolePermissions'
  import { getNameByPath } from '@/utils/get-name-by-path'
  import { getPermissionTreeBySearch } from '@/api/system/permission'
  import { saveRole, getPermissions } from '@/api/system/role'

  export default {
    components: { SetRolePermissions },
    name: getNameByPath(),
    data() {
      return {
        permissionList: [],
        role: {
          status: 1,
          userCode: this.getUserCode(),
          adminFlag: 0
        },
        radioFlag: false,
        radio: '1',
        rules: {
          name: [
            { required: true, message: '请填写名称', trigger: 'blur' }
          ]
        }
      }
    },
    // 初始化页面
    mounted() {
      const queryParams = this.getCurrentPage().query
      if (queryParams.subRoleId) {
        this.radioFlag = true
        this.role = queryParams
        this.role.status = queryParams.status * 1
        if (this.role.firstFlag.toString() === '1') {
          this.radio = '1'
        }
        if (this.role.supplierFlag.toString() === '1') {
          this.radio = '2'
        }
        if (this.role.memberFlag.toString() === '1') {
          this.radio = '3'
        }
        if (this.role.warehouseFlag.toString() === '1') {
          this.radio = '4'
        }
        this.initPermissionList()
        this.getPermissions()
      } else {
        this.initPermissionList()
      }
    },
    methods: {
      radioChange() {
        this.initPermissionList()
      },
      // 权限树
      initPermissionList() {
        const data = {}
        if (this.radio === '1') {
          data.firstFlag = 1
        }
        if (this.radio === '2') {
          data.supplierFlag = 1
        }
        if (this.radio === '3') {
          data.memberFlag = 1
        }
        if (this.radio === '4') {
          data.warehouseFlag = 1
        }
        getPermissionTreeBySearch(data).then(response => {
          if (response.isError) return
          // 去掉 一级菜单
          this.permissionList = response.data.slice(1)
        })
      },
      // 保存信息
      getPermissions() {
        if (!this.role.subRoleId) return
        getPermissions(this.role.subRoleId).then(response => {
          if (response.isError) return
          this.$refs.rolePermissions.$refs.permissionTree.setCheckedKeys(response.data)
        })
      },
      // 保存信息
      saveData() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            // 需要保存半选的keys
            const permissionTree = this.role.permissionIds = this.$refs.rolePermissions.$refs.permissionTree
            this.role.permissionIds = permissionTree.getHalfCheckedKeys().concat(permissionTree.getCheckedKeys())
            this.role.firstFlag = 0
            this.role.supplierFlag = 0
            this.role.memberFlag = 0
            this.role.warehouseFlag = 0
            if (this.radio === '1') {
              this.role.firstFlag = 1
            }
            if (this.radio === '2') {
              this.role.supplierFlag = 1
            }
            if (this.radio === '3') {
              this.role.memberFlag = 1
            }
            if (this.radio === '4') {
              this.role.warehouseFlag = 1
            }
            saveRole(this.role).then((response) => {
              if (response.isError) {
                return
              }
              this.$message({ type: 'success', message: '保存成功!' })
              this.$router.push({ path: '/subAccount/role/index' })
            })
          }
        })
      }
    }
  }
</script>
